<template>
  <CloudDialog
    v-model:visible="visible"
    :loading="loading"
    title="上传版本"
    :width="600"
    :mask-closable="false"
    :cancel="handleClose">
    <template #footer>
      <a-button @click="handleClose">关闭</a-button>
    </template>
    <a-spin :loading="loading" class="w-full">
      <a-form ref="formRef" layout="vertical" :model="formState">
        <a-form-item label="" asterisk-position="end">
          <template #label>
            <div class="flex flex-col">
              <span>程序包</span>
              <span class="text-5 text-xs leading-5"
                >支持文件格式：只能上传.tar.gz的文件</span
              >
            </div>
          </template>
          <div class="w-full">
            <div>
              <a-upload
                ref="upload"
                v-model:file-list="fileList"
                class="flex-1"
                :before-upload="beforeUpload"
                :custom-request="customRequest"
                accept="application/x-gzip"
                :show-file-list="false"
                :max-count="1">
                <template #upload-button>
                  <a-button long :disabled="fileList.length > 0">
                    <i-icons-upload />点击上传</a-button
                  >
                </template>
              </a-upload>
              <div v-for="i in fileList" :key="i" class="flex flex-col">
                <div class="progress-row">
                  <div class="progress-name"><i-icons-file />{{ i.name }}</div>
                  <div class="progress-status">
                    <span v-if="percentage === 100">
                      <i-icons-success></i-icons-success>
                    </span>
                    <span v-else>{{ percentage + '%' }}</span>
                  </div>
                </div>
                <a-progress
                  v-if="percentage !== 0 && percentage !== 100"
                  :percent="percentage / 100"
                  track-color="165DFF"
                  :show-text="false" />
                <div class="flex-1"></div>
              </div>
            </div>
          </div>
        </a-form-item>
        <a-form-item label="版本号" field="dns_api_id" asterisk-position="end">
          <a-input
            v-model="formState.version"
            disabled
            placeholder="根据上传文件自动生成"></a-input>
        </a-form-item>

        <a-form-item label="版本说明" asterisk-position="end">
          <a-textarea
            v-model="formState.imprint"
            disabled
            placeholder="根据上传文件自动生成"
            :auto-size="{ maxRows: 5, minRows: 5 }"></a-textarea>
        </a-form-item>

        <!-- <a-form-item label="版本说明" asterisk-position="end">
          <div class="imprint-detail"><div v-html="markdownContent"></div></div>
        </a-form-item> -->
      </a-form>
    </a-spin>
  </CloudDialog>
</template>
<script lang="ts" setup>
import type { DomainItem } from '@/apis/model/resolve'
import { getApiNodeVersionDetailApi } from '@/apis/modules/resolve/version'
// import { marked } from 'marked'
import { type FormInstance, type RequestOption } from '@arco-design/web-vue'
const emit = defineEmits(['reload'])
// import { v4 as uuidV4 } from 'uuid'
interface IProp {
  record?: DomainItem
}
// const markdownContent = ref('')
const fileList = ref<any[]>([])
const visible = defineModel<boolean>('visible', { required: true })
withDefaults(defineProps<IProp>(), {})
const formRef = ref<FormInstance>()
// const dnsNameOptions = ref<LabelValue[]>([])
const formState = ref({
  imprint: '',
  version: '',
  file_key: '',
  file: undefined,
  id: undefined
})
// 上传的文件
const loading = ref<boolean>(false)

const baseUrl = computed(() => {
  return import.meta.env.VITE_BASE_URL
})

const { percentage, initTus, startOrResumeUpload, pauseUpload } = useUpload()
//上传组件
const customRequest = (option: RequestOption) => {
  const { fileItem } = option
  const file = fileItem.file!
  initTus({
    endpoint: baseUrl.value + 'api/node/version',
    file,
    afterSuccess: getDetail,
    afterError: () => (fileList.value = [])
  })
  startOrResumeUpload()
}

const beforeUpload = () => {
  // 上传前的校验逻辑
  return true
}
//获取版本号 版本说明等信息
function getDetail(data: string) {
  const id = data.substring(data.lastIndexOf('/') + 1)
  loading.value = true
  getApiNodeVersionDetailApi({
    file_id: id
  })
    .then((res) => {
      loading.value = false
      formState.value.version = res.version ?? ''
      formState.value.imprint = res.imprint ?? ''

      //markdownContent.value = marked(res.imprint || '')
    })

    .finally(() => {
      loading.value = false
    })
}

//const isUnClick = ref(true)

//清空表单
const resetField = () => {
  formRef.value?.resetFields()
  formState.value = {
    imprint: '',
    version: '',
    file_key: '',
    file: undefined,
    id: undefined
  }
  fileList.value = []
}

const handleClose = () => {
  pauseUpload()
  resetField()
  emit('reload')
  visible.value = false
}
</script>

<style scoped lang="less">
.progress-row {
  display: flex;
  padding: 4px;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  .progress-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
  }
  .progress-status {
    display: flex;
    align-items: center;
  }
}

.imprint-detail {
  display: flex;
  padding: 8px 12px;
  align-items: flex-start;
  gap: 6px;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid var(---color-border-4, #dfe2e5);
  background: var(---color-fill-1, #f7f8fa);
  height: 160px;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
}
</style>
